<template>
  <div class="callAnalysis">
    <el-table-form ref="form" :model="query">
      <el-form-item label="来电日期:" prop="dateTime">
        <el-date-picker
          v-model="query.dateTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="视角:" prop="queryType">
        <el-select v-model="query.queryType" clearable>
          <el-option label="时间节点分析" :value="1" />
          <el-option label="话务员对比分析" :value="2" />
        </el-select>
      </el-form-item>
      <template v-slot:btns>
        <el-button
          v-permission="1"
          type="primary"
          icon="el-icon-search"
          @click="getData()"
        >查询</el-button>
      </template>
    </el-table-form>
    <div class="chart-body">
      <Charts :options="option" />
    </div>
  </div>
</template>

<script>
  import Charts from '@/components/Charts'
  import { callAnalysisList } from '@/api'
  import moment from 'dayjs'

  export default {
    name: 'callAnalysis',
    components: {
      Charts
    },
    data() {
      return {
        query: {
          dateTime: new Date(),
          queryType: 1
        },
        option: {}
      }
    },
    mounted() {
      // this.chartsInit();
      this.getData()
    },
    methods: {
      search() {},
      // 初始化chart
      chartsInit(data) {
        const xdata = []
        const yjtCount = []
        const zxCount = []
        const wjtCount = []
        const avgtime = []

        data.forEach((v) => {
          if (this.query.queryType === 1) {
            xdata.push(`${v.date}点`)
          } else {
            xdata.push(v.answer)
          }
          switch (v.callStatus) {
          case 1:
            yjtCount.push(v.count)
            zxCount.push(0)
            wjtCount.push(0)
            avgtime.push(v.avgtime)
            break
          case 2:
            yjtCount.push(0)
            zxCount.push(v.count)
            wjtCount.push(0)
            break
          case 3:
            yjtCount.push(0)
            zxCount.push(0)
            wjtCount.push(v.count)
            break
          }
        })

        this.option = {
          tooltip: {
            trigger: 'axis',

            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            formatter: function(params, ticket, callback) {
              var res = params[0].name
              for (var i = 0, l = params.length; i < l; i++) {
                if (params[i].seriesType === 'line') {
                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + '秒'
                } else {
                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + '个'
                }
              }
              return res
            }
          },
          grid: {
            top: 80
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            },
            itemSize: 18
          },
          legend: {

            data: ['已接听', '占线', '未接听', '已接听平均通话时长']
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              data: xdata
            // axisPointer: {
            //   type: "shadow",
            // },
            }
          ],
          yAxis: [

            {
              type: 'value',
              name: '呼入数量',
              axisLabel: {
                formatter: '{value}个'
              }
            },
            {
              type: 'value',
              name: '时间（S）',
              axisLabel: {
                formatter: '{value}秒'
              }
            }
          ],
          series: [
            {
              name: '已接听',
              type: 'bar',
              stack: '总数',
              data: yjtCount,
              color: ['#FF7F51']
            },
            {
              name: '占线',
              type: 'bar',
              stack: '总数',
              data: zxCount,
              color: ['#87CEFA']

            },
            {
              name: '未接听',
              type: 'bar',
              stack: '总数',
              data: wjtCount,
              color: ['#D970D6']
            },
            {
              name: '已接听平均通话时长',
              type: 'line',
              yAxisIndex: 1,
              data: avgtime,
              color: ['#33CD32']
            // lineStyle: {
            //   color: '#33CD32'
            // }
            }
          ]
        }
      },
      async getData(arg) {
        let params = {
          ...this.query
        }
        if (this.query.dateTime) params.dateTime = moment(this.query.dateTime).format('YYYY-MM-DD')
        if (arg) {
          params = {
            ...params,
            ...arg
          }
        }
        const { status, data } = await callAnalysisList(params)
        if (status === 200) {
          this.chartsInit(data)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.callAnalysis {
  min-height: 100%;
  // display: flex;
  //  flex-direction: column;
  .chart-body {
    height: 600px;
    // flex: 1;
  }
}
</style>
